<template>
  <view>
    <view class="settle-box">
      <view class="left">
        <radio :checked="checkedAllstate" color="#c00000" @click="radioclickHandler"></radio>
        <text>全选</text>
      </view>
      <view class="mid">
        <text>合计:</text>
        <text class="mid-text">￥{{gettotalprices}}.00</text>
      </view>
      <view class="right" @click="settleGoods">
        结算
      </view>
    </view>
  </view>
</template>

<script>
  import {
    mapState,
    mapGetters,
    mapMutations
  } from 'vuex'
  export default {
    name: "my-settle",
    data() {
      return {
        seconed: 3,
        timer: null
      };
    },
    computed: {
      ...mapGetters('m_cart', ['gettotalprices', 'checkedAllstate', 'getcheckednum']),
      ...mapGetters('m_user', ['addressinfo']),
      ...mapState('m_user', ['token']),
      ...mapState('m_cart', ['cart']),
    },
    methods: {
      ...mapMutations('m_cart', ['checkedAll', 'cancelCheckedAll']),
      ...mapMutations('m_user', ['updatePage']),
      radioclickHandler() {
        if (!this.checkedAllstate) {
          this.checkedAll()
        } else {
          this.cancelCheckedAll()
        }
      },
      settleGoods() {
        if (!this.getcheckednum) {
          return uni.$showMsg('请选择要结算的商品~~~(=^_^=)')
        }
        if (!this.addressinfo) {
          return uni.$showMsg('请选择收货地址(=^_^=)')
        }
        if (!this.token) {
          return this.delayNavigate()
        }
        this.payOrder()
      },
      async payOrder() {
        // 1. 创建订单
        // 1.1 组织订单的信息对象
        const orderInfo = {
          // 开发期间，注释掉真实的订单价格，
          // order_price: this.checkedGoodsAmount,
          // 写死订单总价为 1 分钱
          order_price: 0.01,
          consignee_addr: this.addressinfo,
          goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
        }
        // 1.2 发起请求创建订单
        const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
        console.log(res);
        if (res.meta.status !== 200) return uni.$showMsg('无支付权限(×_×)')
        // 1.3 得到服务器响应的“订单编号”
        const orderNumber = res.message.order_number
      
         // 2. 订单预支付
         // 2.1 发起请求获取订单的支付信息
         const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
         // 2.2 预付订单生成失败
         if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
         // 2.3 得到订单支付相关的必要参数
         const payInfo = res2.message.pay
      
         // 3. 发起微信支付
         // 3.1 调用 uni.requestPayment() 发起微信支付
         const [err, succ] = await uni.requestPayment(payInfo)
         // 3.2 未完成支付
         if (err) return uni.$showMsg('订单未支付！')
         // 3.3 完成了支付，进一步查询支付的结果
         const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
         // 3.4 检测到订单未支付
         if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
         // 3.5 检测到订单支付完成
         uni.showToast({
           title: '支付完成！',
           icon: 'success'
         })
       },
      showtasot(n) {
        uni.showToast({
          icon: 'none',
          title: '请登录后再结算,' + n + '秒后跳转到登录页面',
          mask: true,
          duration: 1500
        })
      },
      delayNavigate() {
        this.showtasot(this.seconed)
        this.timer = setInterval(() => {
          this.seconed--
          if (this.seconed == 0) {
            clearInterval(this.timer)
            uni.switchTab({
              url: '/pages/my/my',
              success:() =>{
                this.updatePage({
                  openType:"switchTab",
                  from:'/pages/cart/cart'
                })
              }
            })
            this.seconed = 3
            return
          }
          this.showtasot(this.seconed)
        }, 1000)
      }
    }
  }
</script>

<style lang="scss">
  .settle-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 5px;
    font-size: 14px;

    .left {
      display: flex;
      align-items: center;
    }

    .mid {
      .mid-text {
        color: #c00000;
        font-size: 16px;
        font-weight: bold;
      }
    }
  }

  .right {
    min-width: 120px;
    height: 50px;
    background-color: #c00000;
    text-align: center;
    line-height: 50px;
    font-size: 18px;
    color: #fff;
  }
</style>
